<template>
	<div class="c-text">
		<img width="100%" height="100%" @dblclick="pickVedio" @click.stop="vedioPlayer" src="../../../../dist/static/images/bg/play.png"
		 v-if="!cm.showVedio">
		<div v-html="cm.props.src" class="videStyle" v-if="cm.showVedio"></div>
		<div class="close" v-if="cm.showVedio" @click="closeVideo"></div>
	</div>
</template>

<script>
		// 防抖函数
	import {
		debounce
	} from '../utils.js'

	export default {
		name: 'BaseVedio',
		props: {
			compid: {
				type: [String, Number],
				required: true
			}
		},
		data() {
			return {
				set_video: {
					t: 0,
					l: 0,
					w: 285,
					h: 504,
					br: 0,
					z: 9999
				},
				property_value: this.$store.getters.getCompConfigByCompid(this.compid),
				old_property_val: null
			}
		},
		computed: {
			cm() {
				return this.$store.getters.getCompConfigByCompid(this.compid)
			},
			linkStyle() {
				const css = this.cm.css
				return {
					ft: css.ft
				}
			}
		},
		watch: {
			property_value: {
				handler(new_val, old_val) {
					this.change_component({
						new_val,
						old_val
					});
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			change_component: debounce(function(
				params
			) {
				const revoke_state = this.$store.getters.revoke_state
				if (this.old_property_val) {
					// 表示是撤销状态的值的更新
					if (revoke_state) {
						this.$store.commit('REVOKE_STATE', false)
					} else {
						this.$store.commit('ADD_REVOKE_CONTENT', this.old_property_val)
					}
				}
				this.old_property_val = JSON.parse(JSON.stringify(params.new_val))
			}, 300),

			// 显示视频播放控件
			vedioPlayer() {
				if (this.cm.isProview) {
					this.setShowVedio(true)
					// 设置之前的值进行保留
					this.set_position()
					this.setVideoSize()
				}
			},
			// 设置视频是否显示，true:显示
			setShowVedio(value) {
				this.$store.commit('EDIT_COMP', {
					type: 'showVedio',
					compid: this.compid,
					value: value
				})
			},
			// 视频弹框展示
			pickVedio() {
				if (!this.cm.isProview) {
					this.$store.commit('SET_VEDIO_URL',this.cm.props.src)
						this.$store.commit('SET_PICK_VEDIO', {
						status: true,
						callback: (result) => {
							const compId=this.compid
							this.$store.commit('EDIT_COMP', {
								type: 'props',
								compid: compId,
								value: {
									src: result.src
								}
							})
// 							this.$store.dispatch('addNewComp', {
// 								name: 'Vedio',
// 								src: result.src
// 							})
							
						}
					})
					// this.$store.commit('SET_PICK_VEDIO', true)
				}
			},
			setVideoSize() {
				const store = this.$store
				const comp_id = this.compid
				const set_val=this.set_video
				Object.keys(this.set_video).forEach(function(key) {
					if (key !== 'z') {
						store.commit('EDIT_COMP', {
							type: 'css',
							compid: comp_id,
							value: {
								base: {
									[key]: set_val[key]
								}
							}
						})
					}else{
						store.commit('EDIT_COMP', {
							type: 'css',
							compid: comp_id,
							value: {
								z: set_val[key]
							}
						})
					}
				})

			},
			// 关闭之后，还原之前的图标
			get_position() {
				const comp = this.cm
				const store = this.$store
				const comp_id = this.compid
				Object.keys(comp.position).forEach(function(key) {
					if(key!=='z'){
						store.commit('EDIT_COMP', {
							type: 'css',
							compid: comp_id,
							value: {
								base: {
									[key]: comp.position[key]
								}
							}
						})
					}else{
						store.commit('EDIT_COMP', {
							type: 'css',
							compid: comp_id,
							value: {
								z: comp.position[key]
							}
						})
					}
				})
			},
			// 将播放之前的值进行保存
			set_position() {
				const comp = this.cm
				const store = this.$store
				const comp_id = this.compid
				Object.keys(comp.css.base).forEach(function(key) {
					if (key !== 'rotate') {
						store.commit('EDIT_COMP', {
							type: 'position',
							compid: comp_id,
							value: {
								[key]: comp.css.base[key]
							}
						})
					} else {
						store.commit('EDIT_COMP', {
							type: 'position',
							compid: comp_id,
							value: {
								z: comp.css.z
							}
						})
					}
				})
			},

			closeVideo() {
				if (this.cm.isProview) {
					this.setShowVedio(false)
					this.get_position()
				}
			}
		}

	}
</script>
<style>
	.videStyle {
		width: 100%;
		height: 504px;
		background-color: rgba(0, 0, 0, .6);

	}

	iframe,
	embed {
		width: 285px !important;
		height: 170px !important;
		position: absolute;
		top: 140px;
		left: 0;
	}

	.close {
		background: url(../../../../dist/static/images/bg/close_white.png)no-repeat;
		width: 20px;
		height: 20px;
		position: absolute;
		right: 30px;
		top: 60px;
		cursor: pointer;
	}
</style>
